<template>
  <!--给子组件添加局部样式,不会影响父组件样式-->
  <li class='item' @click="handleDelete">{{content}}</li>
</template>

<script>
export default {
  //子组件接收父组件穿过来的值，需要在props里对接收的数据进行声明
  //声明之后就可以在template中使用了
  props:['content','index'],
  methods:{
     handleDelete(){
       //每次删除的时候，子组件使用$emit与父组件通信
       //向外触发事件,事件名为delete,下标为index
       console.log("局部方法调用成功！");
       this.$emit('delete',this.index);
     }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .item{
      color:green;
    }
</style>
